<template>
  <div class="active_hp">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
        <div v-for="(m,index) in list" class="every_list" :key="index">
           <ul class="active_info">
             <li>
                <div class="active_img">
                  <img src="https://placehold.it/42x42" alt="">
                </div>
             </li>
             <li>
                  <span>
                    {{m.dynamicState_name}}
                  </span>
                  <p>
                    {{m.dynamicState_time}} &nbsp; {{m.dynamicState_minute}}
                  </p>
             </li>
             <li>
                <i></i>
             </li>
           </ul>
           <div class="active_content">
              <p>{{m.dynamicState_content.c_text}}</p>
           </div>
           <ul class="active_images">
             <li>
               <img src="https://placehold.it/100x82" alt="">
             </li>
             <li>
               <img src="https://placehold.it/100x82" alt="">
             </li>
             <li>
               <img src="https://placehold.it/100x82" alt="">
             </li>
           </ul>
           <ul class="active_state">
             <li><i class="yo-ico" @click="clickhandle(index)" :class="{active:m.isActive}" key="">&#xe607;</i><span>{{m.dz}}</span></li>
             <li><i class="yo-ico">&#xe745;</i><span>32</span></li>
             <li><i class="yo-ico">&#xe6e7;</i><span>25</span></li>
           </ul>
        </div>
    </van-list>
  </div>
</template>
<script>
import Vue from "vue";
import { List, PullRefresh } from "vant";
Vue.use(List);
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
    };
  },

  methods: {
    clickhandle(index){
      var bool = this.list[index].isActive;
      if(!bool) this.list[index].dz++;
      else this.list[index].dz--;
      this.list[index].isActive=!bool;
    },

    async onLoad() {
     let result=await this.$http.get("/js/news.json");
     this.list=result.data.data.user.u_dynamicState

     this.list=this.list.map(item=>{
       return {...item,dz:122,isActive:false,}
     })

      this.loading = false;
      if(this.list.length>=5){
        this.finished = true;
      }
    },
  },
};
</script>
<style lang="stylus" scoped>
.active_hp
  width 100%
  height: 100%;
  .every_list
    width 92%
    height: 3.29rem;
    margin-left 4%
    margin-top .12rem
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgb(215 215 215);
    overflow hidden
    .active_info
      display flex
      li:first-child
        flex 60
        .active_img
          width .42rem
          height .42rem
          margin .2rem .1rem .1rem .1rem
          border-radius:.21rem
          background yellow
          overflow hidden
      li:nth-child(2)
        flex 255
        margin .2rem .1rem .1rem .05rem
        span
          font-size .16rem
        p
          font-size .12rem
          color #999
      li:last-child
        flex 60

    .active_content
      width 92%
      margin-left 4%
      word-wrap: break-word;
      p
        font-size: 13px;
    .active_images
      width 92%
      display flex
      justify-content space-around
      margin-left 4%
      margin-top .1rem
      li
        flex 1
        img 
          width 96%
          height 96%
    .active_state 
      display flex
      justify-content space-around
      padding-top .08rem
      li
        flex 1
        text-align center
        i 
          font-size .2rem
        .active
          color blue
        span 
          display block  
</style>